<template>
  <div class="main-bg">
    <div class="main-container">
      <HomeHeader
        :search-value="searchValue"
        @update:search-value="val => searchValue = val"
      />
      <HomeBanner :banners="banners" />
      <HomeNav :navs="navs" />
      <ProductGrid :products="products" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HomeHeader from '~/pages/home/HomeHeader.vue'
import HomeBanner from '~/pages/home/HomeBanner.vue'
import HomeNav from '~/pages/home/HomeNav.vue'
import ProductGrid from '~/pages/home/ProductGrid.vue'

const searchValue = ref('')
const banners = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpg',
]
const navs = [
  { icon: '🧊', text: 'Refrigerators' },
  { icon: '❄️', text: 'AC' },
  { icon: '📺', text: 'Televisions' },
  { icon: '🧺', text: 'Washing' },
  { icon: '🗄️', text: 'Deep Freezers' },
]
const products = [
  { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Haier C11 Slanted Hood (HC...', price: '81,000' },
  { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Haier Water Dispenser White ...', price: '22,000' },
  { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Haier Auto Ignition 3 Bur...', price: '31,400' },
  { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Haier Washing Machine', price: '25,000' },
  { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Haier TV 55"', price: '60,000' },
  { img: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg', title: 'Haier Deep Freezer', price: '40,000' },
]
</script>

<style scoped>
.main-bg {
  min-height: 100vh;
  background: #eaf2f6;
}
.main-container {
  max-width: 7.5rem;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
}

.banner {
  height: 200px;
  margin: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.shop-list {
  /* width: 7.5rem;
  height: 10rem;
  font-size: .24rem; */
  width: 100%;
  height: 200px;
  font-size: 16px;
  font-weight: bold;
}
</style> 